import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons'

function OrderUnpayScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{fontSize: 40}}>待付款!</Text>
    </View>
  );
}

function OrderPaidScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{fontSize: 40}}>待发货!</Text>
    </View>
  );
}

function OrderSentScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{fontSize: 40}}>待收货!</Text>
    </View>
  );
}

function OrderFinishScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{fontSize: 40}}>待评价!</Text>
    </View>
  );
}

const Tab = createMaterialTopTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBarPosition='bottom' // 显示位置 top | bottom
        tabBarOptions={{
          labelStyle: { fontSize: 16 }, 
          tabStyle: { // 样式
            borderColor: '#dfb',
            borderWidth: 1,
          },
          activeTintColor: 'red', // 当前标签的字体或图标颜色
          inactiveTintColor: '#666', // 非当前标签的字体或图标颜色
          showIcon: true, // 是否显示图标
          showLabel: true, // 是否显示文字
          style: { backgroundColor: 'powderblue' },
        }}
      >
        <Tab.Screen
          name="OrderUnpay" 
          component={OrderUnpayScreen} 
          options={{
            title:'待付款',
            tabBarIcon: ({focused, color}) => {
              return (
                <Ionicons name={"hammer-outline"} size={20} color={color} />  
              )
            }
          }}
        />
        <Tab.Screen
          name="OrderPaid" 
          component={OrderPaidScreen} 
          options={{
            title:"待发货",
            tabBarIcon: ({focused, color}) => {
              return (
                <Ionicons name={"arrow-redo-circle-outline"} size={20} color={color} />  
              )
            }
          }} 
        />
        <Tab.Screen 
          name="OrderSent" 
          component={OrderSentScreen} 
          options={{
            title:"待收货",
            tabBarIcon: ({focused, color}) => {
              return (
                <Ionicons name={"arrow-redo-outline"} size={20} color={color} />  
              )
            }
          }} 
        />
        <Tab.Screen 
          name="OrderFinish" 
          component={OrderFinishScreen} 
          options={{
            title:"待评价",
            tabBarIcon: ({focused, color}) => {
              return (
                <Ionicons name={"chatbubble-ellipses-outline"} size={20}  color={color} />  
              )
            }
          }} 
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
